ul,li{
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
}
.loading {
    position: relative;
    margin: 250px auto;
    width: 142px;
    height: 142px;  
    animation: rotate 7s infinite linear;
}
li {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 6px solid transparent;
    border-bottom: none;
    transform-origin: 50% 100% 0 ;
    animation: rotate 3s infinite cubic-bezier(0.09,0.3,0.8,0.03);
}
.loading li:nth-child(1) {
    width: 44px;
    height: 22px;
    margin: -22px 0 0 -22px;
    border-color: #2172b8;
    border-radius: 36px 36px 0 0;
    animation-timing-function: cubic-bezier(0.09,0.3,0.12,0.03);
}
.loading li:nth-child(2) {
    width: 58px;
    height: 29px;
    margin: -29px 0 0 -29px;
    border-color: #e67e22;
    border-radius: 42px 42px 0 0;
    animation-timing-function: cubic-bezier(0.09,0.6,0.24,0.03);
}
.loading li:nth-child(3) {
    width: 72px;
    height: 36px;
    margin: -36px 0 0 -36px;
    border-color: #8e44ad;
    border-radius: 48px 48px 0 0;
    animation-timing-function: cubic-bezier(0.09,0.9,0.36,0.03);
}
.loading li:nth-child(4) {
    width: 86px;
    height: 43px;
    margin: -43px 0 0 -43px;
    border-color: #c0392b;
    border-radius: 54px 54px 0 0;
    animation-timing-function: cubic-bezier(0.09,1.2,0.48,0.03);
}
.loading li:nth-child(5) {
    width: 100px;
    height: 50px;
    margin: -50px 0 0 -50px;
    border-color: #f1c40f;
    border-radius: 60px 60px 0 0;
    animation-timing-function: cubic-bezier(0.09,1.5,0.6,0.03);
}
.loading li:nth-child(6) {
    width: 114px;
    height: 57px;
    margin: -57px 0 0 -57px;
    border-color: #1abc9c;
    border-radius: 66px 66px 0 0;
    animation-timing-function: cubic-bezier(0.09,2.1,0.84,0.03);
}
.loading li:nth-child(7) {
    width: 128px;
    height: 64px;
    margin: -64px 0 0 -64px;
    border-color: #B33771;
    border-radius: 66px 66px 0 0;
    animation-timing-function: cubic-bezier(0.09,1.8,0.72,0.03);
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}